import React, { Component } from 'react'
import { HashRouter as Router, Route, Link ,Switch, Redirect,withRouter} from "react-router-dom"
// function Index() {
//   return <h1>首页</h1>
// }
class Index extends Component{
  render(){
    // console.log(this.props);
    return <h1>首页</h1>
  }
}
function Product(props) {
  console.log(props);
  return <div>
    <h1>产品:{props.match.params.idd}</h1>
  </div> 
}
class User extends Component{
  constructor(props){
    super(props);
    console.log("Product 组件被渲染了");
  }
  render(){
    
    return (
      <div>
        <h1>用户</h1>
        <button onClick={()=>{
          this.props.history.push("/")
        }}>跳</button>
      </div>
    )
  }
}
//组件里有跳转的时候
let UserWith=withRouter(User)


function PageNotfind() {
  return <h1>404</h1>
}
export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Link to="/">首页</Link>
          <Link to="/product/456">产品</Link>
          <Link to="/user">用户</Link>
          <Switch>
            <Route path="/" component={Index} exact></Route>
            <Route path="/product/:idd" component={Product} exact></Route>
            <Route path="/User" component={()=><UserWith></UserWith>} exact></Route>
            {/* <Route path="/404" render={()=><PageNotfind></PageNotfind>} exact></Route> */}
            <Route path="/404" component={PageNotfind} exact></Route>

            <Redirect to="/404"></Redirect>
          </Switch>
        </Router>
      </div>
    )
  }
}
